<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="css/common.css">
  <link rel="stylesheet" href="css/client.css">
  <title>登录页面</title>
</head>
<body>
<!--作为遮罩层实现背景模糊-->
<div class="cover"></div>
<!--作为整个界面的容器-->
<div class="client-container">
<!--  作为中间的聊天区-->
  <div class="main">
<!--    作为左边的好友以及会话界面-->
    <div class="left">
        <div class="user"></div>
        <div class="search">
            <input type="text">
            <button></button>
        </div>
<!--        标签页-->
        <div class="tab">
<!--            会话列表标签-->
            <div class="tab-session"></div>
<!--            好友列表标签-->
            <div class="tab-friend"></div>
        </div>
<!--        会话列表-->
        <ul class="list" id="session-list">
            <li>
                <h3>lisi</h3>
                <p>你要吃啥</p>
            </li>
            <li id="selected">
                <h3>lisi</h3>
                <p>你要吃啥</p>
            </li>
            <li>
                <h3>lisi</h3>
                <p>你要吃啥</p>
            </li>
            <li>
                <h3>lisi</h3>
                <p>你要吃啥</p>
            </li>

        </ul>
        <!--      好友列表-->
        <ul class="list hide" id="friend-list">
            <li>
                <h4>lisi</h4>
            </li>
            <li>
                <h4>lisi</h4>
            </li>
            <li>
                <h4>lisi</h4>
            </li>
        </ul>
    </div>

<!--    实现聊天编辑框-->
    <div class="right">
<!--会话标题-->
        <div class="title">lisi</div>
<!--        一个消息区-->
        <div class="message-show">
            <div class="message message-left">
                <!--            消息块-->
                <div class="box">
<!--                    <h4>lisi</h4>-->
<!--                    <p>今天吃点啥这不随便你这不随便你这不随便你这不随便你这不随便你这不随便你这不随便你这不随便你</p>-->
                </div>
            </div>
            <div class="message message-right">
                <!--            消息块-->
                <div class="box">
<!--                    <h4>zhangsan</h4>-->
<!--                    <p>这不随便你这不随便你这不随便你这不随便你这不随便你这不随便你这不随便你这不随便你这不随便你这不随便你</p>-->
                </div>
            </div>
        </div>
<!--        消息编辑框-->
        <textarea class="message-input"></textarea>
<!--        发送按钮-->
        <div class="ctrl">
            <button>发送</button>
        </div>
    </div>

  </div>
</div>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="js/client.js"></script>
</body>
</html>